ARIA: searchbox Rolle

Die searchbox kann anstelle von textbox verwendet werden, wenn das Textfeld innerhalb eines Elements mit der Rolle search ist. Eine searchbox ist das semantische Äquivalent zu HTMLs <input> des Typs search, <input type="search">, welches nach Möglichkeit verwendet werden sollte.

Die searchbox muss einen zugänglichen Namen haben. Wenn die searchbox Rolle auf ein HTML-Element <input> angewendet wird, sollte ein zugehöriges <label> verwendet werden. Andernfalls verwenden Sie aria-labelledby, wenn ein sichtbares Etikett vorhanden ist, oder aria-label, wenn kein sichtbares Etikett vorhanden ist.

Der Screenreader wird "Suchfeld", "Suchbearbeitung" oder "Suchfeld" zusammen mit dem zugänglichen Namen ankündigen. Dies kann redundant sein, wenn "Suche" im Etikett enthalten ist.

<div tabindex="0" aria-label="search" role="searchbox" contenteditable></div>

Während das obige gültig ist, ist es einfacher, prägnanter und weniger redundant für den Screenreader-Nutzer zu schreiben:

<input type="search" />

Das Folgende ist eine Suchform mit einer searchbox und einem Button, einem ARIA-Live-Bereich und einem Container für Suchergebnisse.

<form role="search">
  <input
    type="search"
    role="searchbox"
    aria-description="search results will appear below"
    id="search"
    value="" />
  <label for="search">Search this site</label>
  <button>Submit search</button>
</form>
<div aria-live="polite" role="region" aria-atomic="true">
  <div class="sr-only"></div>
</div>
<div id="search-results"></div>

Die Aufnahme von role="searchbox" wenn das Formular eine search ist und das Etikett anzeigt, dass das Element eine Suche ist, kann dazu führen, dass unterstützende Technologien etwas wie "search search this site search box" ankündigen, was redundant ist. Die Aufnahme von role="searchbox" ist nicht notwendig:

<input
  type="search"
  aria-description="search results will appear below"
  id="search"
  value="" />

• <input type="search">
• ARIA: search Role
• ARIA: textbox Role